<script setup lang="ts">
import { ref } from 'vue'
//分页器当前页码
let pageNo = ref<number>(1)
//分页器一页显示数量
let pageSize = ref<number>(10)
</script>
<template>
    <el-form inline>
        <!-- 搜索题目 -->
        <el-form-item>
            <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                    搜索题目
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <div style="margin: 20px 10px;">
                            <el-input placeholder="请输入内容"></el-input>
                        </div>
                        <div class="person-record-buttonbox">
                            <el-button type="primary" size="small">清除</el-button>
                            <el-button type="primary" size="small">确认</el-button>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-form-item>
        <!-- 标记 -->
        <el-form-item>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    标记
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>已掌握</el-dropdown-item>
                        <el-dropdown-item>晚点再刷</el-dropdown-item>
                        <el-dropdown-item>未掌握</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-form-item>
        <!-- 会员专属 -->
        <el-form-item>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    会员专属
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>是</el-dropdown-item>
                        <el-dropdown-item>否</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-form-item>
        <!-- 标签 -->
        <el-form-item label="标签">
            <el-input placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-table border empty-text="暂无收藏列表，快去收藏吧~">
            <el-table-column label="序号" width="80" type="index"></el-table-column>
            <el-table-column label="题目"></el-table-column>
            <el-table-column label="操作"></el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :pager-count="5"
            :page-sizes="[10, 20, 30]" layout="total, prev, pager, next, sizes,->" :total="20" />
    </el-form>

</template>
<style scoped lang="scss">
.el-dropdown-menu {
    width: 200px;
    /* 确保下拉菜单宽度足够 */
}

.el-dropdown-link {
    cursor: pointer;
}


.person-record-buttonbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 10px;
}

// 分页器样式
.el-pagination {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    margin-top: 20px;
    /* 调整与上方内容的间距 */
}
</style>